<template>
	<view class="Evalumain">
		<view class="EVA">
			<view class="Evalumaincont">
				<!-- 头部 -->
				<view class="head" style="border-bottom: 1px solid #F1F1F1;">
					<view class="goodsname">
						<image style="width: 80rpx;height: 80rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/goodimg.png" mode=""></image>
						<text style="color:#333333;font-size:24rpx;margin-left:20rpx;margin-top: 6rpx;font-weight: bold;">小龙坎火锅</text>
						<image src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/rightarrow.png" style="width: 14rpx;height: 26rpx;margin-left: 20rpx;position: absolute;top: 68rpx;left: 271rpx;" mode=""></image>
					</view>
					<view class="changesuccess">
						<text style="color: #333333;font-size:24rpx;line-height:34rpx;">交易成功</text>
					</view>
					<view class="time">
						<text>2020/6/24 12:24:48</text>
					</view>
				</view>
				<!-- 评分 -->
				<view class="score">
					<view class="food" style="margin-left: 26rpx;">
						<text style="font-size: 24rpx; color: #000000;font-weight: bolder;">2~3人餐</text>
						<text style="font-size: 24rpx;color:#999999;margin-left: 12rpx;">x1</text>
					</view>
					<view class="star">
						<text style="color: #333333;font-size: 24rpx;">评分</text>
						<view style="margin-left: 10rpx;">
							<image style="width: 40rpx;height: 40rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/star.png" mode=""></image>
							<image style="width: 40rpx;height: 40rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/star.png" mode=""></image>
							<image style="width: 40rpx;height: 40rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/star.png" mode=""></image>
							<image style="width: 40rpx;height: 40rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/star.png" mode=""></image>
							<image style="width: 40rpx;height: 40rpx;" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/star.png" mode=""></image>
						</view>
						<text style="font-weight: bold;color: #FF6633;font-size: 28rpx;margin-left: 10rpx;">5分</text>
					</view>
				</view>
				<!-- input框 -->
				<view class="box">
			
				</view>
				<!-- 提交照片 -->
				<view class="upload">
					<block v-for="(upload,index) in uploads" :key="index">
						<view class="uplode-file">
							<image v-if="types == 'image'" class="uploade-img" :src="upload" :data-src="upload" @tap="previewImage"></image>
							<image v-if="types == 'image'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></image>
							<video v-if="types == 'video'" class="uploade-img" :src="upload" controls>
								<cover-image v-if="types == 'video'" class="clear-one-icon" :src="clearIcon" @tap="delImage(index)"></cover-image>
							</video>
						</view>
					</block>
					<view v-if="uploads.length < uploadCount" :class="uploadIcon ? 'uploader-icon' : 'uploader-input-box'">
						<view v-if="!uploadIcon" class="uploader-input" @tap="chooseUploads"></view>
						<image v-else class="image-cion" :src="uploadIcon" @tap="chooseUploads"></image>
					</view>
				</view>	
			</view>
		</view>

		<view class="bottombar">
			<view style="padding: 10rpx;margin-left: 20rpx;">
				<radio color="#FCC100" :id="item.name" :value="item.name" :checked="item.checked"></radio>
				<text style="color: #000000;font-size: 24rpx;">匿名评价</text>
				<view  v-if="types == 'image'" @tap="upload" style="width: 128rpx;height: 48rpx;border: 1px solid #FFC300;margin-top: -44rpx;margin-left:78%;text-align: center;">
					<text style="color:#FFC30E;">评价</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			types: {
				type: String,
				default: 'image'
			},
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			clearIcon: {
				type: String,
				default: 'http://img1.imgtn.bdimg.com/it/u=451604666,2295832001&fm=26&gp=0.jpg'
			},
			uploadIcon: {
				type: String,
				default: ''
			},
			uploadUrl: {
				type: String,
				default: ''
			},
			deleteUrl: {
				type: String,
				default: ''
			},
			uploadCount: {
				type: Number,
				default: 1
			},
			//上传图片大小 默认3M
			upload_max: {
				type: Number,
				default: 3
			}
		},
		data(){
			return {
				//上传的图片地址
				uploadImages: [],
				//展示的图片地址
				uploads: [],
				// 超出限制数组
				exceeded_list: [],
			}
		},
		mounted(){
			this.uploads = this.dataList
		},
		methods:{
			previewImage (e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.dataList
				})
			},
			chooseUploads(){
				switch (this.types){
					case 'image': 
						uni.chooseImage({
							count: this.uploadCount - this.uploads.length, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album', 'camera'], //从相册选择
							success: (res) => {
								for(let i = 0; i< res.tempFiles.length; i++){
									if(Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024){
										this.uploads.push(res.tempFiles[i].path)
										this.uploadImages.push(res.tempFiles[i].path)
									}else {
										this.exceeded_list.push(i === 0 ? 1 : i + 1);
										uni.showModal({
											title: '提示',
											content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`
										});
									}
								}
							},
							fail: (err) => {
								uni.showModal({
									content: JSON.stringify(err)
								});
							}
						});
					break;
					case 'video' :
						uni.chooseVideo({
							sourceType: ['camera', 'album'],
							success: (res) => {
								if(Math.ceil(res.size / 1024) < this.upload_max * 1024){
									this.uploads.push(res.tempFilePath)
									uni.uploadFile({
										url: this.uploadUrl, //仅为示例，非真实的接口地址
										filePath: res.tempFilePath,
										name: 'file',
										//请求参数
										formData: {
											'user': 'test'
										},
										success: (uploadFileRes) => {
											this.$emit('successVideo',uploadFileRes)
										}
									});
								}else {
									uni.showModal({
										title: '提示',
										content: `第${[...new Set(this.exceeded_list)].join(',')}张视频超出限制${this.upload_max}MB,已过滤`
									});
								}
							},
							fail: (err) => {
								uni.showModal({
									content: JSON.stringify(err)
								});
							}
						});
					break;
				}
			},
			delImage(index){
				//第一个是判断app或者h5的 第二个是判断小程序的
				if(this.uploads[index].substring(0,4) !== 'http' || this.uploads[index].substring(0,11) == 'http://tmp/'){
					this.uploads.splice(index,1)
					return;
				};
				if(!this.deleteUrl) {
					uni.showModal({
						content: '请填写删除接口'
					});
					return;
				};
				uni.request({
					url: this.deleteUrl,
					method: 'DELETE',
					data: {
						image: this.dataList[index]
					},
					success: res => {
						if(res.data.status == 1) {
							uni.showToast({
								title: '删除成功'
							})
							this.uploads.splice(index,1)
						}
					},
				});
			},
			upload(){
				if(!this.uploadUrl) {
					uni.showModal({
						content: '请填写上传接口'
					});
					return;
				};
				for (let i of this.uploadImages) {
					uni.uploadFile({
						url: this.uploadUrl, //仅为示例，非真实的接口地址
						filePath: i,
						name: 'file',
						//请求参数
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							this.$emit('successImage',uploadFileRes)
						}
					});
				}
			}
		}
	}
</script>

<style>
	.Evalumain {
		width: 100%;
		height: 100vh;
		background-color: #F1F1F1;
	}
	
	.EVA{
		padding: 20rpx;
	}

	.Evalumaincont {
		background-color: #FFFFFF;
		height: 532rpx;
		width: 100%;
	}

	.Evalumaincont .head {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.Evalumaincont .head .goodsname {
		display: flex;
		margin-top: 20rpx;
	}

	.Evalumaincont .head .changesuccess {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.Evalumaincont .head .time {
		position: absolute;
		top: 110rpx;
		left: 140rpx;
		color: #333333;
		font-weight: lighter;
		font-size: 20rpx;
	}

	.star {
		display: flex;
		flex-direction: row;
		margin-left: 26rpx;
		margin-top: 12rpx;
	}

	.box {
		width: 660rpx;
		height: 156rpx;
		border: 1px solid #EEEEEE;
		margin-left: 26rpx;
		margin-top: 12rpx;
	}

	.bottombar {
		width: 100%;
		height: 80rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
	}
	
	.upload {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.uplode-file {
		margin: 10upx;
		width: 120upx;
		height: 80upx;
		position: relative;
	}
	.uploade-img {
		display: block;
		width: 120upx;
		height: 80upx;
	}
	.clear-one{
		position: absolute;
		top: -10rpx;
		right: 0;
	}
	.clear-one-icon{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		top: 0;
		right: 0;
		z-index: 9;
	}
	.uploader-input-box {
		position: relative;
		margin-left: 29rpx;
		margin-top: 16rpx;
		width: 120upx;
		height: 80upx;
		border: 2upx solid #D9D9D9;
	}
	.uploader-input-box:before,
	.uploader-input-box:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #D9D9D9;
	}
	.uploader-input-box:before {
		width: 4upx;
		height: 79upx;
	}
	.uploader-input-box:after {
		width: 79upx;
		height: 4upx;
	}
	.uploader-input-box:active {
		border-color: #999999;
	}
	.uploader-input-box:active:before,
	.uploader-input-box:active:after {
		background-color: #999999;
	}
	.uploader-input {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.uploader-icon{
		position: relative;
		margin:10upx;
		width: 208upx;
		height: 208upx;
	}
	.uploader-icon .image-cion{
		width: 100%;
		height: 100%;
	}
</style>
